<template>
	<template v-if="showList">
		<image @click.stop="chooseFile" style="width: 100%;height: 100%;" src="@/static/logo.png"></image>
		<progress v-if="files.length !== 0 && files[0].progress" :percent="files[0].progress" />
	</template>
	<view class="uplaod-page" v-else>
		<view class="upload-image">
			<view v-for="(item, index) in files" :key="index" class="list">
				<view class="item">
					<view class="bottom-group">
						<view class="button-group">
							<button type="default" @click="del(index)">删除</button>
							<button type="primary" @click="uplaod(item)" :disabled="item.isUpload">上传</button>
						</view>
						<progress v-if="item.progress" :percent="item.progress" />
					</view>

					<image v-if="item.type === 'image'" class="img" :src="item.src" mode="aspectFit" @tap="previewImage(item.src)"></image>
					<video class="img" v-else-if="item.type === 'video'" :src="item.src" controls></video>
				</view>
			</view>

			<view class="list" @click="chooseFile">
				<view class="item"><image class="img" src="@/static/logo.png"></image></view>
			</view>
		</view>
	</view>
</template>

<script>
import UploadMixin from '../../common/mixin/upload-mixin.js';
export default {
	name: 'uplaod-files',
	mixins: [UploadMixin],
	props: {
		type: {
			type: String,
			default: 'image'
		},
		hasList: {
			type: Boolean,
			default: true
		},
		autoUpload: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	},
	computed: {
		showList() {
			return !this.hasList;
		}
	},
	created: function() {},
	methods: {
		chooseFile() {
			if (this.inUpload) {
				return;
			}
			const number = this.hasList ? 9 : 1;
			switch (this.type) {
				case 'image':
					this.chooseImage(number);
					break;
				case 'video':
					this.chooseVideo();
					break;
				case 'files':
					this.chooseFiles(number);
					break;
			}
		},
		chooseVideo(number) {
			const self = this;
			uni.chooseVideo({
				success: function(res) {
					const { height, width, size, name } = res;
					if (size > 99 * 1024 * 1024) {
						uni.showModal({
							title: '文件大于100M'
						});
						return;
					}
					let type = res.tempFile.type;
					let str = type.substr(0, type.indexOf('/'));
					if (str !== 'video') {
						uni.showModal({
							title: '必须为视频文件'
						});
						return;
					}
					self.files.push({
						src: res.tempFilePath,
						progress: 0,
						isUpload: false,
						type: 'video',
						fileInfo: {
							height,
							width,
							size,
							name,
							type
						},
						file: res.tempFile
					});
				}
			});
		},
		async chooseImage(number) {
			const res = await uni.chooseImage({
				count: number
			});
			const l = res.tempFilePaths.length;
			for (let i = 0; i < l; i++) {
				let type = res.tempFiles[i].type;
				type = type.substr(0, type.indexOf('/'));
				const { name, size, type: fileType } = res.tempFiles[i];
				const { width, height } = await uni.getImageInfo({
					src: res.tempFilePaths[i]
				});
				this.files.push({
					src: res.tempFilePaths[i],
					isUpload: false,
					progress: 0,
					type,
					file: res.tempFiles[i],
					fileInfo: {
						width,
						height,
						name,
						size,
						type: fileType
					}
				});
			}
			if (this.autoUpload) {
				this.uploadAll();
			}
		},
		chooseFiles(number) {}
	}
};
</script>

<style scoped lang="scss">
.uplaod-page {
	padding: 10px;
}
.bottom-group {
	position: absolute;
	z-index: 2;
	width: 90%;
	bottom: 20%;
	left: 5%;
	.button-group {
		display: flex;
		margin-bottom: 5px;
		button {
			background-color: #2c405a;
		}
	}
}

.upload-image {
	grid-template-columns: repeat(5, 1fr);
	grid-row-gap: 10px;
	grid-column-gap: 10px;
}
@media screen and (max-width: 361px) {
	.uplaod-page {
		padding: 5px;
	}
	.upload-image {
		grid-template-columns: repeat(2, 1fr);
		grid-row-gap: 5px;
		grid-column-gap: 5px;
	}
}
@media screen and (min-width: 1200px) {
	/* .uplaod-page{
		padding: 5px;
	} */
	.upload-image {
		grid-template-columns: repeat(8, 1fr);
		grid-row-gap: 15px;
		grid-column-gap: 15px;
	}
}
.upload-image {
	display: grid;
	.list {
		width: 100%;
		padding-top: 100%;
		position: relative;
		border: thin dotted rgb(250, 0, 255);
		border-radius: 5%;
		.item {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			// top: 10%;left:10%;width: 80%;height: 80%;
			button {
				padding: 3px;
				line-height: 18px;
				font-size: 14px;
			}
			.img {
				border-radius: 5%;
				width: 90%;
				height: 90%;
			}
		}
	}
}
</style>
